<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 aligin-items-center">
      <div class="col-3 text-center">
        <img :src="column.avatar.url" alt="" class="rounded-circle border w-100 h-100">
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
      </div>
    </div>
    <PostList :list="list"></PostList>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted } from 'vue'
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import PostList from "@/components/PostList.vue";


export default defineComponent({
  components: { PostList },
  setup() {
    // route 是一个函数，调用后返回对应的对象 --- route.params.id 获取id
    const route = useRoute()
    const store = useStore()

    const currenId = route.params.id

    onMounted(() => {
      store.dispatch('fetchColumn', currenId),
        store.dispatch('fetchPosts', currenId)


    })
    //作者的id
    const column = computed(() => store.getters.getColumnById(currenId))
    //作者的文章对应作者id,多个文章---文章列表
    const list = computed(() => store.getters.getPostById(currenId))


    return {
      column,
      list
    }
  }
})
</script>

<style scoped></style>